<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@3/lib/index.css"/>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDSLNdoblDPHFvr1aI1b4xD6_ZWnfiG4AI&callback=initMap"
            defer></script>
    <style>
        .loading,
        .loading > div {
            position: relative;
            box-sizing: border-box;
        }

        .loading {
            display: block;
            font-size: 0;
            color: #000;
        }

        .loading.la-dark {
            color: #333;
        }

        .loading > div {
            display: inline-block;
            float: none;
            background-color: currentColor;
            border: 0 solid currentColor;
        }

        .loading-box {
            position: fixed;
            top: 0;
            left: 0;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .loading {
            display: inline-block;
            width: 32px;
            height: 32px;
        }

        .loading > div {
            position: absolute;
            width: 2px;
            height: 10px;
            margin: -5px 2px 2px -1px;
            border-radius: 0;
            animation: line-spin-clockwise-fade 1s infinite ease-in-out;
        }

        .loading > div:nth-child(1) {
            top: 15%;
            left: 50%;
            transform: rotate(0deg);
            animation-delay: -0.875s;
        }

        .loading > div:nth-child(2) {
            top: 25.2512626585%;
            left: 74.7487373415%;
            transform: rotate(45deg);
            animation-delay: -0.75s;
        }

        .loading > div:nth-child(3) {
            top: 50%;
            left: 85%;
            transform: rotate(90deg);
            animation-delay: -0.625s;
        }

        .loading > div:nth-child(4) {
            top: 74.7487373415%;
            left: 74.7487373415%;
            transform: rotate(135deg);
            animation-delay: -0.5s;
        }

        .loading > div:nth-child(5) {
            top: 84.9999999974%;
            left: 50.0000000004%;
            transform: rotate(180deg);
            animation-delay: -0.375s;
        }

        .loading > div:nth-child(6) {
            top: 74.7487369862%;
            left: 25.2512627193%;
            transform: rotate(225deg);
            animation-delay: -0.25s;
        }

        .loading > div:nth-child(7) {
            top: 49.9999806189%;
            left: 15.0000039834%;
            transform: rotate(270deg);
            animation-delay: -0.125s;
        }

        .loading > div:nth-child(8) {
            top: 25.2506949798%;
            left: 25.2513989292%;
            transform: rotate(315deg);
            animation-delay: 0s;
        }

        .loading.la-sm > div {
            width: 1px;
            height: 4px;
            margin-top: -2px;
            margin-left: 0;
        }

        .loading.la-2x > div {
            width: 4px;
            height: 20px;
            margin-top: -10px;
            margin-left: -2px;
        }

        .loading.la-3x > div {
            width: 6px;
            height: 30px;
            margin-top: -15px;
            margin-left: -3px;
        }

        @keyframes line-spin-clockwise-fade {
            50% {
                opacity: 0.2;
            }

            100% {
                opacity: 1;
            }
        }

        .app-box {
            position: relative;
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
        }

        .map-box {
            width: 100%;
            height: 100%;
        }

        .form-box {
            box-sizing: border-box;
            position: absolute;
            top: 50px;
            z-index: 1;
            padding: 10px;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="loading-box">
        <div class="loading">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@3/lib/vant.min.js"></script>
<script>
    let map;
    const app = Vue.createApp({
        template: `<div class="app-box"><div class="form-box"><form><van-search show-action /></form></div><div ref="map" class="map-box"></div></div>`,
        data() {
            return {}
        },
        mounted() {
            const centerPoint = {
                lat: 39.909,
                lng: 116.39742
            };
            //新建map
            map = new google.maps.Map(this.$refs.map, {
                zoom: 16,
                center: centerPoint,
            });
        }
    });
    app.use(vant);
    app.use(vant.Lazyload);
    function initMap() {
        app.mount('#app');
    }
</script>
</body>
</html>
